<template>
  <q-btn label='招 聘 新 司 机' color='primary' @click='showDialog=true' />

  <q-dialog v-model='showDialog'>
    <q-card bordered>
      <q-card-section>
        <div class='text-h6'>请输入需要招聘的司机数（最多为20）</div>
      </q-card-section>

      <q-card-section class='q-pt-none'>
        <q-form @submit='submit'>
          <q-input dense v-model.number='number' autofocus :rules='rules' />
          <div class='flex'>
            <q-space />
            <q-btn flat label='确 定' class='text-primary' type='submit' />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import { FieldRule } from 'app/typings';
import { addDrivers } from 'src/services/api';
import { Notify } from 'quasar';
import { useRouter } from 'vue-router';

const rules: FieldRule<number>[] = [val => (val >= 1 && val <= 20) || '请输入1~20之间的数'];

export default defineComponent({
  name: 'AddDriver',
  setup() {
    const router = useRouter();

    const showDialog = ref(false);
    const number = ref(0);
    const submit = async () => {
      try {
        const response = await addDrivers(number.value);
        if (response.status === 0) {
          Notify.create({ message: '招聘成功！', type: 'positive', position: 'top' });
          setTimeout(() => router.go(0), 1000);
        }
      } catch (error) {
      }
    };

    return {
      showDialog,
      number,
      rules,
      submit
    };
  }
});
</script>
<style scoped>
q-card {
  min-width: 350px;
}
</style>
